// element UI 样式覆盖
// 引入主题变量
@import "./varibles.styl";

// 统一 Element UI 组件的边框圆角
.el-input__inner,
.el-textarea__inner,
.el-select-dropdown,
.el-button,
.el-card,
.el-dialog,
.el-message-box,
.el-notification,
.el-alert {
  border-radius: 4px; // 柔和的圆角
}

// 优化输入框和选择器的焦点样式
.el-input__inner:focus,
.el-textarea__inner:focus,
.el-select .el-input__inner:focus {
  border-color: $Primary; // 使用主题主色作为焦点边框色
  box-shadow: 0 0 0 2px alpha($Primary, 0.2); // 添加柔和的焦点阴影
}

// 优化按钮的焦点和激活样式
.el-button:focus,
.el-button:hover {
  border-color: $PrimaryHover;
  color: $Primary;
}

.el-button--primary:focus,
.el-button--primary:hover {
  background-color: $Primary; // 主色按钮的 hover 效果
  border-color: $Primary;
  color: #fff;
}

// 对话框样式微调
.el-dialog__wrapper {
  .el-dialog {
    margin-top: 9vh !important;
    border-radius: 4px; // 对话框也应用圆角
    box-shadow: $tabBoxShadow; // 应用新的阴影
  }
}

// 头像样式
.el-avatar > img {
	width: 100%;
}

// 文本域字体继承
.el-textarea__inner {
	font-family: inherit;
}

// 输入框计数器行高
.el-input__count {
	line-height: 100%;
}
